<template>
  <div class="panel-container">
    <ForgetHeadbar :title="title" />
    <div class="panel-steps">
      <el-steps :active="active" status="true" align-center>
        <el-step title="验证身份"></el-step>
        <el-step title="绑定微信"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
    </div>
    <div class="panel-changeBindTel">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">

        <el-form-item label="手机号码：" v-if="active==1">
          <div class="step-1"><span>{{ phone }}</span>为了保证您的账号安全，请验证身份，验证成功后才能绑定微信。</div>
        </el-form-item>

        <!--        <el-form-item label="手机号码：" prop="tel" v-if="active==2">-->
        <!--          <el-input placeholder="请输入新手机号码" v-model="ruleForm.tel" @change="changeNewTel" style="width:320px;"></el-input>-->
        <!--        </el-form-item>-->

        <el-form-item label="手机验证码：" prop="code" v-if="active == 1">
          <el-input placeholder="请输入验证码" v-model="ruleForm.code1" style="width:194px; margin-right:10px"></el-input>
          <GetVcode1 @vcodeCallback="sendVcodeSuccess" />
        </el-form-item>

        <div class="bind-wechat" v-if="active==2">
          <iframe :src="qrcode"  width="400" height="420" frameborder="0" scrolling="auto"></iframe>
          <!--             <div class="qrcode">-->
          <!--               <img src="https://open.weixin.qq.com/connect/qrcode/0611Jea6ky789gFM" style="width: 230px;height: 230px;" />-->
          <!--           <template>-->
          <!--              <div>-->
          <!--                <html-panel :url="qrcode"></html-panel>-->
          <!--              </div>-->
          <!--            </template>-->
          <!--            </div>-->
          <p>请打开要绑定的微信，扫一扫扫描上方二维码，即可完成绑定</p>
        </div>

        <!--        <el-form-item label="手机验证码：" prop="code" v-else-if="active == 2">-->
        <!--          <el-input placeholder="请输入验证码" v-model="ruleForm.code2" style="width:194px; margin-right:10px"></el-input>-->
        <!--          <GetVcode2 ref="GetVcode2" @vcodeCallback="sendVcodeSuccess" />-->
        <!--        </el-form-item>-->

        <el-form-item v-if="active<3">
          <el-button type="primary" @click="submitForm('ruleForm')" style="width:320px;">下一步</el-button>
        </el-form-item>

        <div class="panel-changeSuccess" v-if="active==3">
          <div class="tips"><svg-icon icon-class="correct" class="correct" />恭喜您，微信绑定成功</div>
          <el-button type="primary" @click="outUserCenter()">用户中心</el-button>
        </div>

        <div class="panel-changeError" v-if="active==4">
          <div class="tips">很抱歉，微信绑定失败，该微信已被账号（{{ phone }}）绑定</div>
          <el-button type="primary" @click="RestBinding()">重新绑定</el-button> <a @click="outUserCenter()" >返回用户中心</a>
        </div>

      </el-form>
    </div>

    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <qrcode value="https://baidu.com" :options="{ width: 400 }"></qrcode>
    </el-dialog>

    <div class="panel-changeBindTips">
      <h5>没收到短信验证码？</h5>
      <div class="text">
        1、网络通讯异常可能会造成短信丢失，请重新获取或稍后再试。<br/>
        2、请核实手机是否已欠费停机，或者屏蔽了系统短信。<br/>
        3、如果手机已丢失或停用， 请选择其他验证方式 。<br/>
        4、您也可以尝试将SIM卡移动到另一部手机，然后重试。
      </div>
    </div>
  </div>
</template>

<script>

  import ForgetHeadbar from '@/components/Forget/header'
  import GetVcode1 from '@/components/GetVcode/updatePhoneNumber'
  import GetVcode2 from '@/components/GetVcode/bindingNewPhone'
  // import HtmlPanel from '@/components/HtmlPanel/htmlPanel'
  import { applyQrCode } from '@/api/assets'

  import Vue from 'vue'
  import VueQrcode from '@chenfengyuan/vue-qrcode'
  Vue.component(VueQrcode.name, VueQrcode)

  export default {
    name: 'ChangeBindWeixin',
    components: {
      ForgetHeadbar,
      GetVcode1,
      GetVcode2,
      // HtmlPanel
    },
    data() {
      return{
        title: '绑定微信',
        active: 2,
        dialogVisible: false,
        phone: this.getUserInfo.mobile,
        qrcode:'',
        ruleForm: {
          transactionNo: '',
          transactionDateStart: '',
          transactionDateEnd: '',
          transactionType: '',
          code1: '',
          code2: '',
        },
        rules: {
          // tel: [
          //   { required: true, message: '请输入新手机号码', trigger: 'blur' }
          // ],
          code1: [
            { required: true, message: '请输入验证码', trigger: 'blur' }
          ]
          // ,
          // code2: [
          //   { required: true, message: '请输入验证码', trigger: 'blur' }
          // ]
        },
      }
    },
    methods: {
      handleClose(done) {
        done();
      },
      submitForm(formName) {
        if(this.active == 1){
          getCheckCode({
            code: this.ruleForm.code1,
            phoneNumber: this.phone
          }).then(res=>{
            if(res.data.code == 200){
              this.active = 2
            }else{
              this.actionsAfter(res.data.msg, 'error')
            }
          })
        }else if(this.active == 2){
          getNewCheckCode({
            id:this.getFactoryId(),
            code: this.ruleForm.code2,
            phoneNumber: this.ruleForm.tel
          }).then(res=>{
            if(res.data.code == 200){
              this.active = 3
            }else{
              this.actionsAfter(res.data.msg, 'error')
            }
          })
        }
        // this.active += 1;

        console.log(this.active)
        // this.$refs[formName].validate((valid) => {
        //   if (valid) {
        //     console.log('submit!');
        //   } else {
        //     console.log('error submit!!');
        //     return false;
        //   }
        // });
      },
      //
      sendVcodeSuccess() {

      },
      //
      changeNewTel(val) {
        this.$refs.GetVcode2.getNewTel(val);

      },
      RestBinding(){
        this.active = 1;
      },
      outUserCenter() {
        //进入用户中心
        window.location.href = '/mallplus/index'
      },
      applyQrCode(){
        applyQrCode().then(res =>{
          this.qrcode =  res.data.data;
        })
      }
    },
    created() {
      this.applyQrCode();
    }
  }
</script>

<style lang="scss">
  .panel-container{
    min-height: 100vh;
    background: #fff;
  }
  .panel-steps{
    width: 900px;
    margin: 40px auto;
  }
  .el-step__title{
    font-size: 14px;
  }
  .el-step__title.is-process{
    font-weight: 300;
    color: #c0c4cc;
  }
  .el-step__head.is-process{
    color: #c0c4cc;
    border-color: #c0c4cc;
  }
  .panel-changeBindTel{
    width: 700px;
    padding-left: 50px;
    margin: auto;
    .el-form-item{
      margin-bottom: 34px;
    }
    .step-1{
      color: #858383;
      font-size: 14px;
      span{
        color: red;
        margin-right: 20px;
      }
    }
  }
  .panel-changeBindTips{
    width: 760px;
    padding: 16px 20px;
    margin: 60px auto 30px;
    border: 1px solid #FFC7C7;
    color: #858383;
    background: #FFF4F4;
    font-size: 12px;
    line-height: 26px;
    h5{
      margin: 0;
      font-weight: 300;
      color: #646161;
    }
  }

  .panel-changeError{
    margin-left: -50px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 40px;
  }

  .panel-changeSuccess{
    margin-left: -50px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 40px;
    color: #00AA03;
    .tips{
      margin-bottom: 20px;
    }
    .correct{
      font-size: 26px;
      display: inline-block;
      vertical-align: top;
      margin: 5px 10px 0 0;
    }
  }
  .bind-wechat{
    text-align: center;
    .qrcode{
      width: 230px;
      height: 230px;
      padding: 10px;
      margin: auto;
      border: 1px solid #eee;
    }
    p{
      font-size: 13px;
      color: #666;
      padding: 10px 0;
    }
  }
</style>
